<template>
	<view class="content" :style="{'height': wh + 'px'}">
		<view class="categroy-box">
			<view :class="['categroy-item flex-1', cate_idx==index&&'categroy-item-active']"
				v-for="(item, index) in localGoods" :key="index" @click="selectCate(item, index)">
				<text>{{item.title}}</text>
				<view class="cate-num flex-1" v-if="item.cateNum>0">{{item.cateNum>99?'99':item.cateNum}}</view>
			</view>
		</view>
		<view class="goods-box">
			<view class="goods-item flex-1" v-for="(item, idx) in localGoods[cate_idx].children" :key="idx">
				<text>{{item.name}}</text>
				<view class="goods-btn">
					<view class="bor-r flex-1" @click="goodsChange(item, '0')">-</view>
					<input maxlength="3" class="goods-input" type="number" v-model="item.num"
						@input="goodsInput($event,item)" />
					<view class="bor-l flex-1" @click="goodsChange(item, '1')">+</view>
				</view>
			</view>
		</view>
		<view class="all-goods-num">已选商品：<text style="color: #FB7299; font-weight: 600;">{{total}}</text></view>
	</view>
</template>

<script>
	import {
		category,
		goods
	} from '@/common/data.js'
	import {
		computedData
	} from '@/common/common.js'
	export default {
		data() {
			return {
				wh: 0,
				localGoods: [],

				cate_idx: 0,
				total: 0
			}
		},
		onLoad() {
			const system = uni.getSystemInfoSync()
			this.wh = system.windowHeight

			this.localGoods = computedData(category, goods)
		},
		methods: {
			selectCate(item, index) {
				this.cate_idx = index
			},
			goodsChange(item, type) {
				if (type == 0) {
					item.num > 0 ? item.num-- : 0
				} else {
					item.num++
				}
				// 计算商品总数数量
				this.computedTotalNum()
			},
			goodsInput(e, item) {
				item.num = e.detail.value / 1
				// 计算商品总数数量
				this.computedTotalNum()
			},
			computedTotalNum() {
				var total = 0
				this.localGoods.forEach(x => {
					x.children.forEach(x1 => {
						if (x.id == x1.pid) {
							x.cateNum = x.children.reduce((pre, next) => {
								return pre += next.num
							}, 0)
						}
						total += x1.num
					})
				})
				this.total = total
			},
		}
	}
</script>

<style lang="scss">
	.flex-1 {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bor-l {
		border-left: 1px solid #333;
	}

	.bor-r {
		border-right: 1px solid #333;
	}

	.content {
		background-color: #F6F6F6;
		display: flex;

		.categroy-box {
			width: 100px;

			.categroy-item {
				height: 50px;
				border-bottom: 1px solid #888;
				position: relative;
			}

			.cate-num {
				background-color: #816ff1;
				color: #FFF;
				width: 23px;
				height: 23px;
				border-radius: 50px;
				position: absolute;
				right: 5px;
				top: 5px;
			}

			.categroy-item-active {
				color: #FFF;
				background-color: #FB7299;
				border-bottom: 1px solid #FB7299;
			}
		}

		.goods-box {
			flex: 1;
			background-color: #888;

			.goods-item {
				height: 120px;
				background-color: #FFF;
				position: relative;

				.goods-btn {
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					right: 10px;
					bottom: 10px;
					width: 100px;
					height: 30px;
					background-color: #FB7299;
					border-radius: 15px;

					.goods-input {
						flex: 1;
						text-align: center;
					}

					view {
						flex: 1;
						height: 30px;
						font-size: 18px;
					}
				}
			}
		}

		.all-goods-num {
			position: absolute;
			bottom: 0;
		}
	}
</style>